<div class="layui-card">
    <div class="layui-card-header">检索条件</div>
    <div class="layui-card-body">
        <form id="operlog-query-form" class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">系统模块</label>
                    <div class="layui-input-inline">
                        <input name="title" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作人员</label>
                    <div class="layui-input-inline">
                        <input name="loginName" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">请选择</option>
                            <option th:each="dict,enableStat:${statusList}" th:value="${dict.dataCode}" th:text="${dict.dataText}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作时间</label>
                    <div class="layui-input-inline">
                        <input name="createTimeBetween" id="createTime" placeholder="请选择" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <button class="layui-btn" lay-filter="operlog-query-submit" lay-submit><i class="layui-icon">&#xe615;</i> 检索</button>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body" style="padding-top: 0px;">
        <table class="layui-table" id="operlog-table" lay-filter="operlog-table"></table>
    </div>
</div>

<script type="text/html" id="operlog-tool-bar">
	<div class="layui-btn-group">
		<button class="layui-btn layui-btn-sm layui-btn-danger" id="btnClear"><i class="layui-icon">&#xe640;</i> 清空</button>
		<button class="layui-btn layui-btn-sm" id="btnExport"><i class="layui-icon layui-icon-export"></i> 导出</button>
	</div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="operlog-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">详细</a>
</script>

<!-- 是否启用列 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.status === '0'){ }}
        <span class="layui-badge layui-bg-gray">{{ d.statusText }}</span>
    {{#  } else if(d.status === '1'){ }}
        <span class="layui-badge-rim">{{ d.statusText }}</span>
    {{#  } }}
</script>

<script>
    layui.use(['jquery', 'form', 'table', 'util', 'sadmin', 'element', 'laydate'], function () {
        var $ = layui.$ //重点处
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;
        var laydate = layui.laydate;

        form.render('select');

        //日期
        laydate.render({
            elem: '#createTime',
            theme: '#393D49',
            range: '~'
        });

        // 渲染表格
        table.render({
            elem: '#operlog-table',
            url: 'system/logs/operlog/pageList',
            toolbar: '#operlog-tool-bar',
            defaultToolbar: ['filter', 'exports'],
            skin: 'line',
            page: true,
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {type: 'numbers', title: '序号'},
                    {field: 'title', title: '系统模块'},
                    {field: 'loginName', sort: true, title: '操作人员'},
                    {field: 'deptName', title: '部门名称'},
                    {field: 'status', width: 100, align: 'center', title: '操作状态', templet: '#statusTpl'},
                    {
                    	field: 'operTime',align: 'center', templet: function (d) {
                            return util.toDateString(d.operTime.time);
                        }, title: '操作时间'
                    },
                    {align: 'center', width: 180, toolbar: '#operlog-table-bar', fixed: 'right', title: '操作'}
                ]
            ]
        });

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(operlog-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
            else if (layEvent === 'setroles') { //授权角色
            	setUserRoles(data);
            }
        });

        // 显示表单弹窗
        var showEditModel = function (data) {
            var title = data ? '修改用户' : '添加用户';
            sadmin.putTempData('system_user', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/user/form',
                finish: function () {
                    table.reload('operlog-table', {});
                }
            });
        };

        // 搜索提交事件
        form.on('submit(operlog-query-submit)', function (data) {
            table.reload('operlog-table', {
                where: data.field
            });
            return false;
        });

    });
</script>